<template>
	<view>
		<Navbar></Navbar>
		<view class="u-m-30">
			<view class="u-m-b-30 u-card-box" v-for="item in list" :key="item.id" >
				<view class="message_tag">{{item.create_time.slice(0,10)}}</view>
				<view class="u-m-t-10 u-flex u-row-between">
					<view class="u-font-bold u-font-30">{{item.title}}</view>
					<!-- <view class="u-color-red" @click="goMessageSource(item.id,item.url)">查看 ></view> -->
				</view>
				<view class="u-m-t-10 u-font-24 u-color-gray">{{item.content}}</view>
			</view>
		</view>
		<Loadmore :status="loadStatus"></Loadmore>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Loadmore from '@/components/Loadmore.vue'
	import reachBottom from '@/mixins/reachBottom.js'
	import {
		messageList, messageRead, messageAllRead
	} from '@/network/tea.js'
	export default {
		mixins: [reachBottom],
		components: {
			Navbar,
			Loadmore
		},
		data() {
			return {
				loadStatus: 'loadmore',
				list: []
			}
		},
		onLoad() {
			this.getMessageList()
			this.postMssageAllRead()
		},
		methods: {
			getMessageList() {
				const params = {
					user_id: uni.getStorageSync("user_id"),
					page: this.page,
					limit: this.pageSize
				}
				messageList(params).then(res => {
					if (res.data.list.length > 0) {
						res.data.list.map(item => this.list.push(item))
					}
					if (res.data.list.length < 10) this.loadStatus = 'nomore'
				})
			},
			postMssageAllRead(){
				messageAllRead({user_id: uni.getStorageSync("user_id")})
			},
			goMessageSource(id,url){
				if(url.includes("mine")){
					messageRead({message_id:id}).then(res=>{
						uni.switchTab({
							url: `/${url}`
						})
					})
				}else{
					messageRead({message_id:id}).then(res=>{
						uni.navigateTo({
							url: `/${url}`
						})
					})	
				}
				
			},
			loadData() {
				if (this.loadStatus == 'nomore') return
				this.page++
				this.loadStatus = 'loading'
				this.getMessageList()
			}
		}
	}
</script>

<style scoped>
	.message_tag {
		background: #B3723E;
		color: #fff;
		display: inline-block;
		font-size: 24rpx;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
	}
</style>